<template>
  <div class="amap-melt-table">
    <el-card>
      <div slot="header" class="clearfix">
        <span>熔纤工作内容</span>
      </div>
      <el-table border style="width: 100%" :data="meltTableData">
        <el-table-column fixed prop="line" label="线程" width="120" align="center"></el-table-column>
        <el-table-column prop="equipment_point" label="设备点" width="200" align="center"></el-table-column>
        <el-table-column prop="workMessage" label="工作内容" width="350" align="center"></el-table-column>
        <el-table-column prop="workload" label="数量" width="120" align="center"></el-table-column>
        <el-table-column prop="unit" label="单位" width="160" align="center"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100" align="center">
          <template slot-scope="scope">
            <span @click="handleDeleteMeltData(scope.$index, scope.row)" class="table-delete-row">删除</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'amapMeltTable',
  props: {
    meltTableData: Array
  },
  data() {
    return {
      // 测试数据
      meltTableList: [
        {
          line: 'GJ01--GF01',
          point: 'GJ01',
          workMessage: '吊线 | 墙壁光缆 | 12芯',
          workload: 1,
          unit: '台'
        },
        {
          line: 'GJ02--GF02',
          point: 'GJ02',
          workMessage: '吊线 | 墙壁光缆 | 12芯',
          workload: 2,
          unit: '台'
        }
      ]
    }
  },
  methods: {
    /**
     * 通知父组件删除表格行
     * @method handleDeleteMeltData
     */
    handleDeleteMeltData(index, row) {
      this.$emit('handleDeleteMeltData', index)
    }
  }
}
</script>

<style scoped>
.amap-melt-table {
  width: 1100px;
  margin: 20px auto 0;
}
.amap-melt-table .clearfix {
  text-align: left;
}
.amap-melt-table .clearfix span {
  font-size: 20px;
}
.amap-melt-table .table-delete-row {
  color: #1abc9c;
  cursor: pointer;
}
</style>